/**
 *  生命周期
 *  组件的生命周期是指组件从创建挂载到页面中运行起来，再到组件不用时卸载的过程。
 *  注意:只有类组件才有生命周期(类组件需要实例化)
 *  挂载阶段: constructor --> render --> componentDidMount
 *  更新阶段: render --> componentDidUpdate
 *  卸载阶段: componentWillUnmount
 */

import React from "react"
class Test extends React.Component {
  // 如果数据是组件的状态需要去影响视图 定义到state中
  // 而如果我们需要的数据状态 不和视图绑定 定义成一个普通的实例属性就可以
  // state中尽量保持精简
  timer = null
  componentDidMount () {
    this.timer = setInterval(() => {
      console.log('定时器开启')
    }, 1000)
  }
  componentWillUnmount () {
    console.log('componentWillUnmount')
    // 清理定时器
    clearInterval(this.timer)
  }
  render () {
    return <div>创建与销毁</div>
  }
}
class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }

  // 发送网络请求 DOM操作
  componentDidMount () {
    console.log('componentDidMount')
    // ajax 类似于mounted
  }
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }

  state = {
    count: 1,
    flag: true
  }
  changeCount = () => {
    this.setState({
      count: this.state.count + 1,
      flag: !this.state.flag
    })
  }
  // 视图变化就会执行render --渲染UI 
  // 注意:不能在render、componentDidUpdate里面调用setState()
  render () {
    console.log('render')
    return (
      <>
        <p>
          this is div
        </p>
        <p>{this.state.count}</p>
        {/* 通过一个数据状态的切换 让Test组件进行销毁和重建 */}
        {this.state.flag ? <Test /> : null}

        <button onClick={this.changeCount}>点击加一</button>

      </>
    )
  }
}
export default App
